<template>
  <div id="tagmapidnex">
    <div class="tag">

    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import ajax from '../../../../api/ajax/ajax'
export default {
  data () {
    return {
      width: 600,
      height: 600,
      imgW: 77,
      imgH: 90,
      textDx: -20,
      textDy: 20
    }
  },
  methods: {
    init () {
      let width = 800
      let height = 600
      let imgW = 77
      let imgH = 90
      let textDx = -20
      let textDy = 20
      let svg = d3.select('.tag').append('svg')
            .attr('width', width)
            .attr('height', height)
      let params = {
        cust_no: '01'
      }
      ajax.post('/api/ico/selectRelaObject.action', params)
        .then(res => {
            let root = {
              nodes: res.data,
              edges: [
                {
                  source: 0,
                  target: 1,
                  value: 0
                }
              ]
            }
            function handleData (root) {
              let edges = []
              let Edges = []
              let sourceNode
              let targetNode
              let valueNode
              root.nodes.forEach(function (e) {
                sourceNode = e.from_cont_id
                targetNode = e.to_cont_id
                valueNode = e.rel_desc
                Edges.push({
                  source: sourceNode,
                  target: targetNode,
                  value: valueNode
                })
              })
              Edges.forEach(function (e) {
                sourceNode = root.nodes.filter(function (n) {
                  return n.from_cont_id === e.source
                })[0]
                targetNode = root.nodes.filter(function (n) {
                  return n.to_cont_id === e.target
                })[0]
                valueNode = root.nodes.filter(function (n) {
                  return n.rel_desc === e.rel_desc
                })[0]
                edges.push({
                  source: sourceNode,
                  target: targetNode,
                  value: e.value
                })
              })
              root.edges = edges
            }
            // function handleUpdateData () {

            // }
            handleData(root)
            let force = d3.layout.force()
                          .nodes(root.nodes)
                          // .nodes(res)
                          .links(root.edges)
                          // .links(edges)
                          .size([width, height])
                          .linkDistance(200)
                          .charge(-1500)
                          .start()
            let edgesLine = svg.selectAll('line')
                            .data(root.edges)
                            .enter()
                            .append('line')
                            .style('stroke', '#ccc')
                            .style('stroke-width', 1)
            let edgesText = svg.selectAll('.linetext')
                            .data(root.edges)
                            .enter()
                            .append('text')
                            .attr('class', 'linetext')
                            .text(function (d) {
                              // return d.target.rel_desc
                              return d.value
                            })
            let nodesImg = svg.selectAll('circle')
                            .data(root.nodes)
                            .enter()
                            .append('circle')
                            .attr('r', 20)
                            .style('fill', '#333')
                            .on('mouseover', function (d, i) {
                              // 显示连接线上的文字
                              edgesText.style('fill-opacity', function (edge) {
                                if (edge.souce === d || edge.target === d) {
                                  return 1.0
                                }
                              })
                            })
                            .on('mouseout', function (d, i) {
                              edgesText.style('fill-opacity', function (edge) {
                                if (edge.source === d || edge.target === d) {
                                  return 0.0
                                }
                              })
                            })
                            .on('click', function (d) {
                              ajax.post('/api/ico/selectRelaObject.action', {cust_no: d.to_cont_id})
                                .then(res => {
                                  // handleData(root)
                                  update(root, res.data)
                                })
                            })
                            .call(force.drag)
            let nodesText = svg.selectAll('.nodetext')
                            .data(root.nodes)
                            .enter()
                            .append('text')
                            .attr('class', 'nodetext')
                            .attr('dx', textDx)
                            .attr('dy', textDy)
                            .text(function (d) {
                              return d.cns_name
                            })
            function update (root, data) {
              handleData(root)
              edgesLine = edgesLine.data(force.links())
              edgesLine.enter()
                        .append('line')
                        .style('stroke', '#ccc')
                        .style('stroke-width', 1)
              edgesLine.exit().remove()
              edgesText = edgesText.data(force.links())
              edgesText.enter()
                        .append('text')
                        .attr('class', 'linetext')
              edgesText.exit().remove()
              nodesImg = nodesImg.data(force.nodes())
              nodesImg.enter()
                      .append('circle')
                      .attr('r', 20)
                      .style('fill', '#333')
                      .call(force.drag)
              nodesImg.exit().remove()
              force.start()
            }
            function tick () {
              force.on('tick', function () {
                // 限制结点的边界
                root.nodes.forEach(function (d, i) {
                  d.x = d.x - imgW / 2 < 0 ? imgW / 2 : d.x
                  d.x = d.x + imgW / 2 > width ? width - imgW / 2 : d.x
                  d.y = d.y - imgH / 2 < 0 ? imgH / 2 : d.y
                  d.y = d.y + imgH / 2 + textDy > height ? height - imgH / 2 - textDy : d.y
                })
                // 更新连接线的位置
                edgesLine.attr('x1', function (d) { return d.source.x })
                edgesLine.attr('y1', function (d) { return d.source.y })
                edgesLine.attr('x2', function (d) { return d.target.x })
                edgesLine.attr('y2', function (d) { return d.target.y })
                // 更新连接线上文字的位置
                edgesText.attr('x', function (d) { return (d.source.x + d.target.x) / 2 })
                edgesText.attr('y', function (d) { return (d.source.y + d.target.y) / 2 })
                // 更新结点图片和文字
                nodesImg.attr('cx', function (d) { return d.x })
                // circleImg.attr('x', function (d) { return d.source.x - imgW / 2 })
                nodesImg.attr('cy', function (d) { return d.y })
                // circleImg.attr('y', function (d) { return d.source.y - imgH / 2 })
                nodesText.attr('x', function (d) { return d.x })
                nodesText.attr('y', function (d) { return d.y + imgW / 4 })
              })
            }
            tick()
        })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
#tagmapidnex > .tag > .linetext {
  font-size: 12px ;
  font-family: SimSun;
  fill:#1f77b4;
  fill-opacity:0.0;
}
</style>
<style>
.linetext {
  font-size: 12px;
  font-family: SimSun;
  fill:#1f77b4;
  fill-opacity:0.0;
}
</style>
